<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>dom更新时机</h1>
    <p>count: {{ count }}</p>
    <button v-on:click="fn">btn</button>
  </div>

  <script src="../Vue.js"></script>

  <script>
  const { createApp, nextTick } = Vue
  
  createApp({
    data() {
      return {
        count: 1
      }
    },
    methods: {
      async fn() {
        // 为了减少渲染次数（为了只渲染一次）
        // 不是每一次的数据改变都会让页面更新
        // 当有数据改变的时候，会等一等，看有没有其他的数据要更新。有的话会让其他的数据一起更新完再做一次性的渲染

        // 响应式：数据改变，页面就会自动重新渲染
        // 数据改变 和 页面重新渲染 不是一起进行
        // this.count++;
        // this.count++;
        // this.count++;
        // this.count++;

        // this.count++;
        // setTimeout(() => {
        //   console.log(document.querySelector("p").innerHTML);
        // }, 0)
        // this.$nextTick(() => {
        //   console.log(document.querySelector("p").innerHTML);
        // })

        // nextTick()就是用来等待页面渲染结束
        this.count++;
        await nextTick();
        console.log(document.querySelector("p").innerHTML);
      }
    }
  }).mount('#app')
</script>
</body>
</html>